<template>
  <view class="container">
    <sc-navbar back title="钉盒详情"></sc-navbar>
    <glo-gutter>
      <view class="detail-img">
        <sc-image
          height="100%"
          :src="detailData.info.nailboxImageAddress"
          width="100%"
          round="8"></sc-image>
      </view>
      <glo-chunk>
        <sc-flex ai="center">
          <sc-image
            height="37"
            src="/static/imgs/ic_wenda.png"
            width="37"></sc-image>
          <glo-title title="钉盒详细信息"></glo-title>
          <sc-view pl="23">
            <glo-tag
              :text="
                ProductStatusLabel[detailData.info.nailboxStatus]
              "></glo-tag>
          </sc-view>
        </sc-flex>
        <glo-info
          :info="getDetailInfo(detailData.info)"
          :label-style="{ width: '175rpx' }"
          mt="12"></glo-info>
      </glo-chunk>
      <glo-include name="所含产品">
        <glo-chunk
          v-for="(item, index) in detailData.list"
          :key="item.id"
          shadow
          @click="toProductDetail(item)">
          <sc-flex ai="center" jc="between">
            <glo-title
              :title="`骨板层${uni.$utils.padZero(index + 1)}`"></glo-title>
            <sc-icon color="primary" name="arrow-right" size="20"></sc-icon>
          </sc-flex>
          <sc-flex ai="center" col-gap="19" mt="20">
            <sc-image
              height="112"
              :src="item.boardImageAddress"
              width="112"></sc-image>
            <glo-info :info="getProductInfo(item)"></glo-info>
          </sc-flex>
        </glo-chunk>
      </glo-include>
    </glo-gutter>
    <sc-flex col-gap="20" jc="center" padding="106rpx 0 30rpx">
      <sc-button
        height="75"
        text="使用记录"
        type="white"
        width="262"
        @click="toUsageRecord"></sc-button>
    </sc-flex>
  </view>
</template>
<script setup>
import { useTemporaryStore } from "@/store/temporary.js";
const temporaryStore = useTemporaryStore();
import { ProductStatusLabel } from "@/commons/enums";

const id = ref(0);
const detailData = reactive({
  info: {},
  list: [],
  total: 0,
  params: {
    pageNo: 1,
    pageSize: 10,
  },
});
const getDetailInfo = (item) => [
  {
    type: "single",
    label: "钉盒名称",
    value: item.nailboxName,
  },
  {
    type: "single",
    label: "条码",
    value: item.nailboxBarcode,
  },
  {
    type: "single",
    label: "钉盒编号",
    value: item.nailboxCode,
  },
  {
    type: "single",
    label: "手术类型",
    value: item.surgeryType,
  },
  {
    type: "single",
    label: "商品大类",
    value: item.productCategory,
  },
  {
    type: "single",
    label: "所含数量",
    value: item.nailboardNum,
  },
  {
    type: "single",
    label: "品牌",
    value: item.brandName,
  },
  {
    type: "single",
    label: "仓库",
    value: item.warehouseName,
  },
  {
    type: "single",
    label: "货位",
    value: item.location,
  },
];
const getProductInfo = (item) => [
  {
    type: "single",
    label: "序号",
    value: item.serialNumber,
  },
  {
    type: "single",
    label: "骨钉层编号",
    value: item.boardCode,
  },
  {
    type: "single",
    label: "所含数量",
    value: item.containCount,
  },
  {
    type: "single",
    label: "骨钉层条码",
    value: item.boardBarcode,
  },
];
const getDetail = async () => {
  const res = await _api.getDingHeDetail(id.value);
  detailData.info = res;
  detailData.list = res.productEntityManagementInfoVOList;
};
const toProductDetail = (item) => {
  temporaryStore.setProduct(item);
  uni.navigateTo({
    url: `/subDingHe/pages/productDetail?id=${item.id}`,
  });
};
const toUsageRecord = () => {
  uni.navigateTo({
    url: "/subDingHe/pages/usageRecord",
  });
};
onLoad((options) => {
  id.value = options.id;
  getDetail();
});
</script>
<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.detail-img {
  width: 100%;
  height: 338rpx;
  border-radius: 8rpx;
}

.detail-info {
  padding: 17rpx 25rpx;
  border-radius: 15rpx;
  background: #ffffff;
}
</style>
